<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>乐鲜生活后台管理系统</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/admin-lte/2.4.3/css/AdminLTE.min.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/admin-lte/2.4.3/css/skins/_all-skins.min.css" rel="stylesheet">
  <link rel="stylesheet" href="../css/addGoods.css">
  <link rel="stylesheet" href="../css/component.css">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/admin-lte/2.4.3/js/adminlte.min.js"></script>
  <link rel="stylesheet" type="text/css" media="screen" href="css/index/index.css" />
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  <script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
  <script src="../resource/ply/Ply.min.js"></script>
  <link rel="stylesheet" href="../resource/ply/ply.css">

  <script src="https://cdn.bootcss.com/jquery.form/4.2.2/jquery.form.min.js"></script>
</head>

<body class="skin-purple">
  <!-- Main Header -->
  <header id="app-header">
    <component-header></component-header>
  </header>

  <script src="../js/header.js"></script>

  <aside id="app-sidebar">
    <component-sidebar></component-sidebar>
  </aside>

  <script src="../js/sidebar.js"></script>

  <div id="app-ad">
    <component-content title="添加商品">
      <div class="callout callout-info">
        <h4>提示!</h4>

        <p>请认真以下商品信息</p>
      </div>
      <component-box class="box-solid box-primary" title="商品信息填写">

        <div class="panel  panel-info">
          <div class="panel-heading">
            <h3 class="panel-title">商品所属类别选择</h3>
          </div>
          <div class="panel-body row">
            <div class="col-sm-1"></div>
            <div>
              <h5 class="col-sm-1" style="font-weight: bold">一级类别:
              </h5>
              <div class="btn-group col-sm-1">
                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                  {{currentCategory1}}
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li v-for="(item,index) in categoryTree">
                    <a v-on:click="onPriCateClick(index)">{{item.primaryCategory}}</a>
                  </li>

                </ul>
              </div>

            </div>

            <div>
              <h5 class="col-sm-1" style="font-weight: bold; margin-left: 20px">二级类别:
              </h5>
              <div class="btn-group col-sm-1">
                <button type="button" :disabled="isCategory2Valid" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                  {{currentCategory2.secondCategoryName}}
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li v-for="(item,index) in currentCategory2_sets">
                    <a @click="onSubCateClick(index)">{{item.secondCategoryName}}</a>
                  </li>

                </ul>
              </div>
            </div>

            <div>
              <h5 class="col-sm-1" style="font-weight: bold;margin-left: 20px">特别分类:
              </h5>
              <div class="btn-group col-sm-1">
                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" disabled="true">
                  暂无分类
                  <span class="caret"></span>
                </button>

              </div>
            </div>


          </div>
        </div>

        <div class="panel  panel-info">
          <div class="panel-heading">
            <h4 class="panel-title">商品基本信息录入</h4>
          </div>

          <div class="panel-body">

            <div class="col-sm-1"></div>
            <h5 class="col-sm-1" style="padding-right: 20px;font-weight: bold">所属商家:</h5>
            <div class="btn-group">
              <button type="button" class="btn btn-success dropdown-toggle pull-left" data-toggle="dropdown">
                {{currentStore.name}}
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li v-for="(store,index) in all_stores">
                  <a @click="onStoreClick(index)">{{store.name}}</a>
                </li>

              </ul>
            </div>
            <br>
            <br>

            <div class="col-sm-1"></div>
            <h5 class="col-sm-1" style="padding-right: 20px;font-weight: bold">商品名称:</h5>
            <input ref="name" v-model="good_info.name" class="form-control col-sm-3" type="text" placeholder="输入商品名称" style="margin-top: 4px;border-radius: 3px; height: 30px; width: 200px"></input>
            <h5 class="col-sm-1" style="padding-right: 20px;font-weight: bold">商品价格:</h5>
            <div class="input-group col-sm-2">
              <span class="input-group-addon">￥</span>
              <input ref="price" v-model="good_info.price" type="text" placeholder="请精确到小数点后两位" class="form-control" aria-label="Amount (to the nearest dollar)">
            </div>
            <br>

            <div class="col-sm-1"></div>
            <h5 class="col-sm-1" style="padding-right: 20px;font-weight: bold">商品库存:</h5>
            <div class="input-group col-sm-2">
              <input ref="inventory" v-model="good_info.inventory" type="text" placeholder="请输入整数" class="form-control" aria-label="Amount (to the nearest dollar)">
              <span class="input-group-addon">件</span>
            </div>
            <br>

            <div>
              <div class="col-sm-1"></div>
              <h5 class="col-sm-1" style="padding-right: 20px;font-weight: bold">商品描述:</h5>
              <textarea ref="description" v-model="good_info.description" class="col-sm-4" name="content" rows="6" cols="80" placeholder="请输入商品介绍，长度不能低于20字"
                onpropertychange="if(this.scrollHeight>80) this.style.posHeight=this.scrollHeight+5"></textarea>
            </div>


          </div>

        </div>

        <div class="panel panel-info">
          <div class="panel-heading">
            <h3 class="panel-title">商品图片</h3>
          </div>

          <div class="panel-body row " style="margin-left: 30px;">
            <div class="row col-sm-2">
              <div>
                <div class="thumbnail">
                  <!-- <img v-bind:src="img_main"> -->
                  <img :src="img_main" alt="" style="width: 190px;height: 190px">
                  <div class="caption">
                    <h3 class="text-center">主图片选择</h3>
                    <p>主图片将会直接用于商品的展示，包括首页展示，用户搜索结果等地方</p>
                    <p>
                      <form class="row" enctype="multipart/form-data" method="post" action="https://sm.ms/api/upload" id="upform">
                        
                        <div class="text-center">
                            <input @change="onMainImgChange" type="file" name="smfile" id="im" accept="image/*" class="inputfile inputfile-1" />
                            <label for="im">
                                <img src="../img/main/select.png" width="15" height="17" viewBox="0 0 20 17"></img>
                              <span>选择图片</span>
                            </label>
                        </div>
                          
                        <div class="text-center">
                            <input type="submit" id='btn' value="开始上传" class="inputfile inputfile-1">
                            <label for="btn">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
                                  <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
                                  />
                                </svg>
                                <span>上传图片</span>
                              </label>
                        </div>
                      </form>
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xs-1"></div>
            <div class="row col-xs-9" style="margin-top: 50px">
              <div>
                <div class="thumbnail">
                  <h3 style="margin-left: 20px;">副图选择</h3>
                  <div class="container row">
                    <img class="col-sm-2" v-for="path in imgs_subsidiary" style="width: 150px; height: 120px; margin-left: 10px; margin-right: 10px;margin-top: 10px"
                      :src="path">


                  </div>

                  <div class="caption">
                    <p class="text-center">这个图片集是对商品详情的一个展开的介绍，用户将通过这些图片了解到商品的特性，功能，特色</p>
                    <p class="row">
                      <!-- <button class="btn btn-success fileinput-button" type="button">上传</button>
                                            <input type="file" class="upload" accept=".jpg, .png">选择</input> -->

<!-- 
                      <input @change="onSubImgChange" type="file" id="im_sub" class="inputfile inputfile-1 col-sm-1" accept=".jpg, .png" multiple/>
                      <label for="im_sub">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
                          <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
                          />
                        </svg>
                        <span>批量选择</span>
                      </label> -->
                      <form class="row" enctype="multipart/form-data" method="post" action="https://sm.ms/api/upload" id="upSubform">
                        
                        <div class="col-sm-4"></div>
                        <div class="col-sm-2">
                            <input @change="onSubImgChange" type="file" name="smfile" id="im2" accept="image/*" class="inputfile inputfile-1" multiple/>
                            <label for="im2">
                                <img src="../img/main/select.png" width="15" height="17" viewBox="0 0 20 17"></img>
                              <span>选择图片</span>
                            </label>
                        </div>
                          
                        <div class="col-sm-2 ">
                            <input type="submit" id='btn2' value="开始上传" class="inputfile inputfile-1">
                            <label for="btn2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
                                  <path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
                                  />
                                </svg>
                                <span>批量选择</span>
                              </label>
                        </div>
                      </form>

                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="row">
            <div class="col-sm-9"></div>
            <button class="btn btn-warning " style="width: 80px;" @click="reset">清空</button>
            <div class="col-sm-1"></div>
            <button class="btn btn-primary " style="width: 80px;" type="submit" v-on:click="submit">提交</button>
          </div>

        </div>

  </div>

  </component-box>
  <script src="../js/box.js"></script>

  </component-content>
  <script src="../js/content.js"></script>
  </div>

  <script src="../js/addGoods.js"></script>

</body>


</h批量选择